<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div style="border: 1px">
      <van-swipe-cell>
        <van-card
          :desc="shops.descrip"
          :title="shops.name"
          class="goods-card"
          :thumb="shops.pic"
        />
      </van-swipe-cell>
    </div>

    <van-tree-select height="110vw" :items="items" @click-nav="change">
      <template #content>
        <van-card
          num="1"
          :price="i.price"
          :desc="i.description"
          :title="i.name"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          v-for="(i, index) in list1"
          :key="index"
        >
          <template #tags>
            <van-tag type="danger">销量500</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="buy(i.id, i.flavors)"
              >购买</van-button
            >
          </template>
        </van-card>
      </template>
    </van-tree-select>

    <footers></footers>

    <van-dialog
      v-model="show"
      title="选择口味"
      show-cancel-button
      @confirm="submit"
    >
      <div v-for="(i, index) in flavorlist" :key="index">
        <van-radio-group
          v-model="radio[index]"
          v-for="(i,index)in flavors"
          :key="index"
        >
          <van-radio :value="j" name="1" v-for="(j,ind) in aaa" :key="ind">{{
            j
          }}</van-radio>
        </van-radio-group>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import footers from "@/components/footers";
export default {
  components: {
    footers: footers,
  },
  data() {
    return {
      flavors:[],
      aaa:[],
      shops: [], // 商家信息
      items: [], // 所有分类
      list1: [], // 所属分类的菜品
    };
  },
  mounted() {
    this.axios
      .get("/index/getshops")
      .then((resp) => {
        this.shops = resp.data.shops;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    change(index) {
      this.axios
        .get("/index/getGoodsBycateid?cateid=" + this.items[index]["id"])
        .then((resp) => {
          this.list1 = resp.data.goodslist;
          console.log(resp);
        })
        .catch((err) => {
          console.log(err);
        });
      alert(this.items[index]["id"]);
    },
    getcateslist() {
      this.axios
        .get("/index/getcates")
        .then((resp) => {
          this.items = resp.data.catelist;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  getgoods(cateid) {
    this.axios
      .get("/index/getGoodsBycateid?cateid=" + cateid)
      .then((resp) => {
        this.list1 = resp.data.goodslist;
        console.log(resp);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  buy(id, flavors) {
    if (flavors) {
      this.buyid = id;
      this.flavors = flavors;
      this.show = true;
    } else {
      // 购物车接口
      this.axios.get('/index/aaa')
      .then((resp) => {
        this.aaa = resp.data.res
      }).catch((err) => {
        console.log(err)
        
      });

    }
  },
  created() {
    this.getcateslist();
  },
};
</script>

<style>
.van-nav-bar__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 60px;
}

.goods-card {
  margin: 0;
  background-color: aliceblue;
}

.delete-button {
  height: 100%;
}
</style>